<template>
  <div class="wrapper">
    <div class="filter_box clearfix">
      <ul class="filter_box_ul">
        <li id="000" data-name="不限" :class="{active:cityId_z === '000'}" @click="cityB('000')">不限</li>
        <li
          v-for="(item, index) in cityJ"
          :key="index"
          :class="{active:cityId_z === item.id}"
          @click="cityB(item.id,item.name)"
        >{{item.name}}</li>
      </ul>
      <ul class="filter_box_ul">
        <li id="000" data-name="不限" @click="cityXiaoB('000')" :class="{active:cityId_xiao === '000'}">不限</li>
        <li v-for="(item, index) in cityJXiao"
          :key="index"
          :class="{active:cityId_xiao === item.id}"
          @click="cityXiaoB(item.id,item.name)"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyRegion',
  data () {
    return {
      cityJ: [],
      cityJXiao: [],
      cityId_z: 0,
      cityId_xiao: 0,
      city1: this.city,
      district1: this.district,
      type: 0
    }
  },
  props: {
    city: String,
    district: String
  },
  mounted () {
    this.postcity()
  },
  methods: {
    cityB (id, name) {
      this.cityId_z = id
      this.type = 1
      if (id !== '000') {
        this.city1 = name
        this.postcity()
      } else {
        this.city1 = ''
        this.$emit('is_regionB', '不限')
        this.$emit('regionC', '')
      }
    },
    cityXiaoB (id, name) {
      this.cityId_xiao = id
      if (id !== '000') {
        this.district1 = name
        this.$emit('is_regionB', this.district1)
        let shu = [this.city1, this.district1]
        this.$emit('regionC', shu)
      } else {
        this.district1 = ''
        if (this.city1 === '') {
          this.$emit('regionC', '')
          this.$emit('is_regionB', '不限')
        } else {
          this.$emit('is_regionB', this.city1)
          let shu = [this.city1, this.district1]
          this.$emit('regionC', shu)
        }
      }
    },
    postcity () {
      if (this.cityId_z === 0) {
        this.cityId_z = sessionStorage.getItem('Cid')
      }
      let id = this.cityId_z
      this.$axios.post(process.env.API_HOST + '/api/common/city', {
        'id': id
      }).then(this.postcitySucc)
        .catch(error => console.log(error))
    },
    postcitySucc (res) {
      if (res.data.code === 1) {
        if (this.type === 0) {
          this.cityJ = res.data.data
        } else {
          this.cityJXiao = res.data.data
        }
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  position absolute
  z-index 999
  top 1.1rem
.filter_box
  width 100%
  height 7.9rem /* 395/50 */
  overflow hidden
  background #fff
  .filter_box_ul
    width 50%
    height 100%
    overflow auto
    float left
    text-align center
    background #F8F8F8
    line-height .88rem /* 44/50 */
    font-size .3rem /* 15/50 */
    .active
      color #F6360A
  .filter_box_ul:nth-child(1)
    background transparent
</style>
